<template>
  <CommonQueryLayout class="material-access">
    <template v-if="auditMode === AuditMode.NORMAL" #top>
      <QueryForm
        :form="queryFormBind"
        :form-item-list="queryFormItems"
        :loading="searchMaterialLoading"
        @query="searchMaterialList()"
      ></QueryForm>
    </template>
    <template #default>
      <CommonTopControl title-text="素材列表">
        <template #titleOptions>
          <a-radio-group v-model:value="auditMode" button-style="solid">
            <a-radio-button :value="AuditMode.NORMAL">
              正常审核
            </a-radio-button>
            <a-radio-button :value="AuditMode.QUICK"> 快速审核 </a-radio-button>
          </a-radio-group>
          <a-button
            v-if="auditMode === AuditMode.QUICK"
            type="primary"
            ghost
            :loading="searchMaterialLoading"
            @click="searchMaterialList()"
          >
            刷新
            <template #icon>
              <UndoOutlined />
            </template>
          </a-button>
        </template>
        <a-button
          v-if="auditMode === AuditMode.QUICK"
          type="primary"
          @click="confirmBatchAudit"
          :loading="upToPaixinLoading || batchAuditMaterialLoading"
        >
          确认审核
        </a-button>
        <div class="material-access__async-paixin">
          <span>是否同步至拍信：</span>
          <a-switch v-model:checked="isPushPaixin" />
        </div>
      </CommonTopControl>
      <MaterialList
        v-if="auditMode === AuditMode.NORMAL"
        :data-source="materialTableState.tableData"
        :loading="searchMaterialLoading"
      >
        <template #actions="{ item }">
          <a-button
            size="small"
            type="primary"
            @click="openAuditMaterialDialog(item)"
            :loading="queryMaterialAuditLogLoading"
          >
            审核
          </a-button>
        </template>
      </MaterialList>
      <SimpleMatList
        v-else
        v-model:violation-ids="violationIds"
        :data-source="materialTableState.tableData"
        :loading="searchMaterialLoading"
        select-text="违规"
      />
      <div class="image-control__page-wrapper">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :show-total="formatTotalPageText"
          v-model:current="pageInfo.current"
          v-model:pageSize="pageInfo.pageSize"
          :total="pageInfo.total"
          @change="pageChange"
          @showSizeChange="pageSizeChange"
          :pageSizeOptions="['8', '16', '24', '32']"
        />
      </div>
    </template>
  </CommonQueryLayout>
  <AuditMaterialDialog
    :data-wrapper="auditMaterialDialogState"
    @enter="comfirmMaterialAudit"
    :confirm-loading="updateMaterialStatusLoading"
  />
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useStore } from '@/store'

import useSearchMateries from './hooks/useSearchMateries'
import useAuditMaterialDialog from './hooks/useAuditMaterialDialog'
import useQuickAudit from './hooks/useQuickAudit'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { CommonTopControl } from '@/components/TopControl'
import { MaterialList, SimpleMatList } from '@/components/ItemList'
import { QueryForm } from '@/components/Form'
import AuditMaterialDialog from './components/AuditMaterialDialog.vue'

import { AuditMode } from './types'
import { MaterialItem } from '@/components/ItemList/MaterialList/types'
import { AsyncToPaixinReq } from '@/api/audit/content/model/materialModel'
import { AuditMaterialApi, upToPaixin } from '@/api/audit/content/material'
import { message } from 'ant-design-vue/lib/components'

const store = useStore()
/**
 * 是否同步至拍信
 */
const isPushPaixin = ref<boolean>(true)
const asyncToPaixin = async (accessList: MaterialItem[]) => {
  if (isPushPaixin.value) {
    const reqData: AsyncToPaixinReq[] = accessList.map<AsyncToPaixinReq>(
      (item) => {
        return {
          blocked: false,
          categories: item.categories?.map((item) => item.name) || [],
          description: item.description || '',
          editorial: false,
          eputId: item.sourceId + '',
          exclusive: false,
          fileSize: Number(item.fileSize),
          id: item.sourceId + '',
          image: item.image,
          mediaType: 6,
          preview: item.previewUrl || '',
          recommend: false,
          source: item.source,
          sourceFile: item.sourceFile || '',
          status: 0,
          tags: item.tags || [],
          title: item.title,
          userId: item.authorId,
          height: item.height,
          width: item.width,
        }
      }
    )
    await upToPaixin(reqData)
    message.info('拍信同步完成')
  }
}
const upToPaixinLoading = computed(() =>
  store.getters['global/isOpLoading'](AuditMaterialApi.ASYNC_TO_PAIXIN)
)

// 素材列表搜索相关逻辑
const {
  queryFormBind,
  queryFormItems,
  searchMaterialLoading,
  searchMaterialList,
  pageChange,
  pageSizeChange,
  formatTotalPageText,
  materialTableState,
  pageInfo,
} = useSearchMateries()

const {
  auditMaterialDialogState,
  openAuditMaterialDialog,
  comfirmMaterialAudit,
  updateMaterialStatusLoading,
  queryMaterialAuditLogLoading,
} = useAuditMaterialDialog(searchMaterialList, asyncToPaixin)

const {
  violationIds,
  confirmBatchAudit,
  auditMode,
  batchAuditMaterialLoading,
} = useQuickAudit(searchMaterialList, asyncToPaixin, materialTableState)

onMounted(async () => {
  await searchMaterialList()
})
</script>

<style lang="scss" scoped>
@include b(material-access) {
  @include e(async-paixin) {
    display: flex;
    align-items: center;
  }
}
</style>
